<script src="../node_modules/vue/dist/vue.js"></script>

<div id="app">
  <counter></counter>
  <counter></counter>
  <counter></counter>
  <button @click="inc">increment</button>
</div>

<script>
// create a counter component (that doesn't take any props)
// all instances of it should share the same count state
// and a button that increments all counters at the same time

// 共享对象作为状态
const state = {
  count: 0
}

const Counter = {
  // Convert state into reactive object
  // 通过 data 返回数据 Vue 会调用观察对象转换它 得到响应性能力 
  // 如果不这样做 那么状态不会传递 vue  vue 就没机会让它具有响应性
  data () {
    return state
  },
  render (h) {
    // Proxy the object
    return h('div', this.count)
  }
}

new Vue({
  el: '#app',
  components: {
    Counter
  },
  methods: {
    inc () {
      state.count++
    }
  }
})
</script>
